<script>
import requestUtil from "@/utils/RequestUtil";
import BottomTab from "@/conponents/BottomTab.vue";

export default {
  name: "cartIndex",
  components: {BottomTab},
  data() {
    return {
      cart_data: [],
      checkProduct: [],
      checkAll: false,
      isLogin: true,
    }
  },
  methods: {
    init() {
      let token = this.$store.getters.getUserInfo.token
      if (!token) {
        this.isLogin = false
        return
      }
      requestUtil({
        url: '/user/shopCartGetList',
        method: "get",
        headers: {
          'token': this.$store.getters.getUserInfo.token
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.cart_data = res.data.data
          this.cart_data.forEach(item => {
            item.productPrice = item.productPrice.toFixed(2)
          })
        }
      })
    },
    checkAllFunc() {
      this.$refs.checkRef.toggleAll(this.checkAll);
    }
  },
  watch: {
    checkProduct: function (val) {
      if (val.length === this.cart_data.length) {
        this.checkAll = true
      }
      if (val.length !== this.cart_data.length && this.checkAll) {
        this.checkAll = false
      }

    },
  },
  computed: {
    allPrice: function () {
      let price = 0
      for (let checkAllElement of this.checkProduct) {
        price += Number(this.cart_data[checkAllElement].productPrice) * this.cart_data[checkAllElement].productNum
      }
      return price * 100
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div style="background-color: rgb(248, 248, 248)">
    <header
        style="height: 50px;background-color: white;display: flex;justify-content: center;align-items: center">
      <span style="font-size: 1.3rem;font-weight: bold">购物车</span>
    </header>
    <van-empty
        v-if="!isLogin"
        description="登录后才能查看购物车哦~"
        image="error"
        style="background-color: white"
    />
    <van-empty
        v-if="!cart_data"
        description="购物车里没有喜欢的商品哦~赶快添加吧！"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        style="background-color: white"
    />
    <van-checkbox-group v-if="isLogin && cart_data" ref="checkRef" v-model="checkProduct">
      <van-swipe-cell v-for="(item,index) in cart_data" :key="item.id">
        <van-card
            :desc="item.productIntroduce"
            :price="item.productPrice"
            :title="item.productName"
        >
          <template #thumb>
            <div style="display: flex;position: relative;width: 100px">
              <div style="width: 10px"/>
              <van-checkbox :name="index" style="position: absolute;left: -10px"/>
              <van-image :src="item.productCarousel" fit="contain" width="88"/>
            </div>
          </template>
          <template #num>
            <van-stepper v-model="item.productNum"/>
          </template>
        </van-card>
        <template #right>
          <van-button square style="height: 100%" text="删除" type="danger"/>
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <van-submit-bar :price="allPrice" button-text="提交订单" style="margin-bottom: 50px">
      <van-checkbox v-model="checkAll" @click="checkAllFunc">全选</van-checkbox>
    </van-submit-bar>
    <BottomTab/>
  </div>
</template>

<style scoped>
:deep(.van-card__thumb) {
  width: 95px;
}
</style>